<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础模板</title>
    <script src="../vue.js"></script>
</head>
<style>
    #outer{
        position: relative;
    }
    #box {
        background-color: skyblue;
        width: 100px;
        height: 100px;
        position: absolute;
    }
</style>

<body>
    <div id="app">
        <div id="outer">
            <div id="box" @mousedown="boxDownHandle" :style="{left:boxPosition.boxLeft+'px',top:boxPosition.boxTop+'px',}">
        </div>
        </div>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    boxPosition: {
                        boxTop: 0,
                        boxLeft: 0
                    },
                    cursorPosition: {
                        cursorX: 0,
                        cursorY: 0
                    },
                }
            },
            methods: {
                boxDownHandle(e) {
                    this.boxPosition.boxTop = e.target.offsetTop
                    this.boxPosition.boxLeft = e.target.offsetLeft
                    this.cursorPosition.cursorX = e.clientX
                    this.cursorPosition.cursorY = e.clientY
                    e.target.onmousemove = (e) => {
                        this.boxPosition.boxTop = e.clientY-this.cursorPosition.cursorY
                        this.boxPosition.boxLeft = e.clientX-this.cursorPosition.cursorX
                    }
                    e.target.onmouseup = function (e) {
                        e.target.onmousemove = null  
                    }
                },

            }
        })
    </script>
</body>

</html>